import React, { useState } from 'react'

export default function Todoitem(props) {

    let {item,index,removeTodo,updateTodo}=props;

    //创建状态
    let [id,setId]=useState(null);

    //显示隐藏 删除按钮
    let changebtn = (i)=>{
        return ()=>{
           i >= 0 ? setId(i) : setId(null)
        //    setId(i);
        }
    }  

    //删除某个todo
    let del=(id)=>{
        return ()=>{
            removeTodo(id);
        }
    }

    //修改某个完成
    let updata=(id)=>{
        return (e)=>{
            updateTodo(id,e.target.checked);
        }
    }

  return (
    <li onMouseOver={changebtn(index)} onMouseOut={changebtn(null)} key={item.id}>
        <label>
            {/* 此时的input只是一个多选框内部的变化只有选中或不选中，所以可以用onchange */}
            <input onChange={updata(item.id)} checked={item.done} type="checkbox"/>
            <span>{item.title}</span>
        </label>
        {/* <button className={id === index ? "btn btn-danger block" : "btn btn-danger none"}>删除</button> */}

        <button className="btn btn-danger" style={id === index ? {display:"block"} : {display:"none"}} onClick={del(item.id)}>删除</button>
    </li>
  )
}
